
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>致河马姐姐的祝福</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- 配置Tailwind自定义颜色和动画 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#E94057',
                        secondary: '#8A2BE2',
                        accent: '#FF6B8B',
                        light: '#F8F0FF',
                        dark: '#4A044A'
                    },
                    animation: {
                        'pop-in': 'popIn 0.6s ease-out forwards',
                        'fade-out': 'fadeOut 0.8s ease-out forwards',
                        'float': 'float 3s ease-in-out infinite',
                        'glow': 'glow 2s ease-in-out infinite alternate',
                        'particle-fall': 'particleFall 2s ease-in forwards',
                        'heart-beat': 'heartBeat 1.5s ease-in-out infinite',
                        'particle-move': 'particleMove 15s infinite linear'
                    },
                    keyframes: {
                        popIn: {
                            '0%': { opacity: '0', transform: 'scale(0.3)', filter: 'blur(10px)' },
                            '70%': { opacity: '1', transform: 'scale(1.05)' },
                            '100%': { opacity: '1', transform: 'scale(1)', filter: 'blur(0)' }
                        },
                        fadeOut: {
                            '0%': { opacity: '1', transform: 'scale(1)' },
                            '50%': { opacity: '0.5', transform: 'scale(0.8)' },
                            '100%': { opacity: '0', transform: 'scale(0.5)' }
                        },
                        float: {
                            '0%, 100%': { transform: 'translateY(0)' },
                            '50%': { transform: 'translateY(-15px)' }
                        },
                        glow: {
                            '0%': { boxShadow: '0 0 10px rgba(233, 64, 87, 0.5), 0 0 20px rgba(138, 43, 226, 0.5)' },
                            '100%': { boxShadow: '0 0 20px rgba(233, 64, 87, 0.8), 0 0 40px rgba(138, 43, 226, 0.8), 0 0 60px rgba(255, 107, 139, 0.6)' }
                        },
                        particleFall: {
                            '0%': { opacity: '1', transform: 'translateY(0) rotate(0deg)' },
                            '100%': { opacity: '0', transform: 'translateY(50px) rotate(360deg)' }
                        },
                        heartBeat: {
                            '0%, 100%': { transform: 'scale(1) rotate(0deg)' },
                            '50%': { transform: 'scale(1.1) rotate(2deg)' }
                        },
                        particleMove: {
                            '0%': { transform: 'translate(0, 0)' },
                            '25%': { transform: 'translate(100px, 100px)' },
                            '50%': { transform: 'translate(200px, 0)' },
                            '75%': { transform: 'translate(100px, -100px)' },
                            '100%': { transform: 'translate(0, 0)' }
                        }
                    }
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .bg-gradient-soft {
                background: linear-gradient(135deg, #F8F0FF 0%, #FFE6F2 50%, #F0E6FF 100%);
            }
            .text-gradient {
                background-clip: text;
                -webkit-background-clip: text;
                color: transparent;
                background-image: linear-gradient(90deg, #E94057, #8A2BE2, #FF6B8B);
            }
            .card-gradient {
                background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 230, 242, 0.9));
                backdrop-filter: blur(10px);
                border: 1px solid rgba(255, 255, 255, 0.3);
            }
            .heart-gradient {
                background: linear-gradient(135deg, #FF6B8B, #E94057, #8A2BE2, #FF85A2);
            }
            .particle {
                position: absolute;
                border-radius: 50%;
                pointer-events: none;
            }
            .heart-particle {
                position: absolute;
                border-radius: 50%;
                pointer-events: none;
            }
        }
    </style>
</head>
<body class="min-h-screen bg-gradient-soft overflow-hidden font-sans">
    <!-- 开始按钮 -->
    <div id="start-container" class="fixed inset-0 flex items-center justify-center z-50">
        <button id="start-btn" class="px-10 py-4 bg-gradient-to-r from-primary to-secondary text-white rounded-full text-xl md:text-2xl font-bold shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-300 focus:outline-none focus:ring-4 focus:ring-accent/50">
            <i class="fa fa-heart mr-2"></i>开始送上祝福
        </button>
    </div>

    <!-- 祝福弹窗容器 -->
    <div id="blessings-container" class="fixed inset-0 pointer-events-none z-20"></div>

    <!-- 大弹窗 -->
    <div id="main-popup" class="fixed inset-0 flex items-center justify-center z-30 opacity-0 pointer-events-none transition-opacity duration-1000">
        <div class="card-gradient rounded-3xl p-8 md:p-12 max-w-md w-full mx-4 shadow-2xl transform scale-90 transition-transform duration-500">
            <h1 class="text-[clamp(2rem,5vw,3rem)] font-bold text-center text-gradient mb-4">致河马姐姐</h1>
            <p class="text-[clamp(1.2rem,3vw,1.5rem)] text-center text-dark/80">愿所有美好与幸运</p>
            <p class="text-[clamp(1.2rem,3vw,1.5rem)] text-center text-dark/80 mb-6">都围绕着你</p>
            <div class="flex justify-center">
                <i class="fa fa-heart text-accent text-4xl animate-pulse"></i>
            </div>
        </div>
    </div>

    <!-- 爱心容器 -->
    <div id="heart-container" class="fixed inset-0 flex items-center justify-center z-40 opacity-0 pointer-events-none transition-opacity duration-1000">
        <div id="heart-shape" class="heart-gradient w-[clamp(100px,25vw,200px)] h-[clamp(100px,25vw,200px)] rounded-full animate-float animate-glow animate-heart-beat flex items-center justify-center shadow-2xl">
            <i class="fa fa-heart text-white text-[clamp(4rem,10vw,6rem)]"></i>
        </div>
    </div>

    <!-- 粒子容器 -->
    <div id="particles-container" class="fixed inset-0 z-10 pointer-events-none"></div>

    <script>
        // 祝福语句数组
        const blessings = [
            "平安喜乐，万事顺意", "身体健康，岁岁无忧", "前程似锦，未来可期", "笑口常开，好运连连",
            "阖家幸福，美满安康", "事业有成，步步高升", "财源广进，富贵吉祥", "爱情甜蜜，永浴爱河",
            "友谊长存，情深似海", "学业进步，智慧增长", "美梦成真，心想事成", "日子红火，生活美满",
            "喜气洋洋，好运自来", "福禄双全，吉祥如意", "平安顺遂，喜乐相伴", "神采奕奕，活力满满",
            "温馨和睦，幸福永远", "事业兴旺，财源滚滚", "爱情美满，家庭幸福", "友情深厚，天长地久",
            "聪明伶俐，学业进步", "笑容常在，好运常来", "生活愉快，万事顺意", "健康长寿，福气满满",
            "花开富贵，吉祥如意", "春风得意，马到成功", "吉祥如意，岁岁平安", "幸福围绕，快乐相伴",
            "前程万里，一帆风顺", "喜气盈门，好运连连", "金玉满堂，富贵吉祥", "平安是福，健康是宝",
            "福禄寿喜，样样俱全", "事业辉煌，人生精彩", "爱情甜蜜，永结同心", "友情长久，温暖相伴",
            "学习进步，天天向上", "快乐无限，幸福无边", "好运相伴，成功相随", "健康长寿，快乐无忧",
            "工作顺心，生活舒心", "爱情美满，婚姻幸福", "友谊长存，情意浓浓", "学业有成，前程似锦",
            "天天快乐，年年幸福", "好运连连，喜事不断", "身体健康，精神饱满", "福禄双全，好运常伴",
            "家庭幸福，美满安康", "事业有成，大展宏图", "爱情甜蜜，永浴爱河", "友情深厚，不离不弃",
            "聪明才智，学有所成", "乐观开朗，笑口常开", "生活幸福，万事如意", "心想事成，好运连连",
            "平安健康，快乐相伴", "喜气洋洋，幸福美满", "金玉满堂，财运亨通", "梦想启航，未来可期",
            "一帆风顺，二龙腾飞", "三阳开泰，四季平安", "五福临门，六六大顺", "七星高照，八方来财",
            "九九同心，十全十美", "百事亨通，千事吉祥", "万事如意，阖家幸福", "笑口常开，青春永驻",
            "事业顺利，再创辉煌", "爱情甜蜜，白头偕老", "友情长久，温暖相伴", "学习进步，天天向上",
            "快乐无限，幸福无边", "好运相伴，成功相随", "健康长寿，快乐无忧", "吉祥如意，福寿安康",
            "工作顺心，生活舒心", "爱情美满，婚姻幸福", "友谊长存，情意浓浓", "学业有成，前程似锦",
            "天天快乐，年年幸福", "好运连连，喜事不断", "身体健康，精神饱满", "福禄双全，好运常伴",
            "家庭幸福，美满安康", "事业有成，大展宏图", "爱情甜蜜，永浴爱河", "友情深厚，不离不弃"
        ];

        // DOM元素
        const startContainer = document.getElementById('start-container');
        const startBtn = document.getElementById('start-btn');
        const blessingsContainer = document.getElementById('blessings-container');
        const mainPopup = document.getElementById('main-popup');
        const heartContainer = document.getElementById('heart-container');
        const particlesContainer = document.getElementById('particles-container');
        const heartShape = document.getElementById('heart-shape');
        
        // 已使用的位置集合，确保不重复
        const usedPositions = new Set();
        // 所有祝福弹窗元素
        const blessingElements = [];
        
        // 生成随机不重复位置
        function getRandomPosition() {
            const containerWidth = window.innerWidth;
            const containerHeight = window.innerHeight;
            const minSize = 120; // 弹窗最小尺寸
            const maxSize = 180; // 弹窗最大尺寸
            
            // 计算可用区域
            const maxX = containerWidth - maxSize;
            const maxY = containerHeight - maxSize;
            
            // 生成随机位置（带间距，避免太靠近）
            let x, y;
            let attempts = 0;
            const spacing = 30; // 弹窗间距
            
            do {
                x = Math.floor(Math.random() * (maxX - minSize) + minSize/2);
                y = Math.floor(Math.random() * (maxY - minSize) + minSize/2);
                attempts++;
            } while (
                // 检查是否与已有弹窗太近
                Array.from(usedPositions).some(pos => {
                    const [px, py] = pos.split(',').map(Number);
                    const distance = Math.sqrt(Math.pow(x - px, 2) + Math.pow(y - py, 2));
                    return distance < maxSize + spacing;
                }) && attempts < 100
            );
            
            // 如果尝试100次仍找不到位置，放宽限制
            if (attempts >= 100) {
                x = Math.floor(Math.random() * maxX);
                y = Math.floor(Math.random() * maxY);
            }
            
            const key = `${x},${y}`;
            usedPositions.add(key);
            
            return { x, y };
        }

        // 创建祝福弹窗
        function createBlessingElement(blessing, index) {
            const { x, y } = getRandomPosition();
            const size = Math.floor(Math.random() * 30) + 110; // 调整尺寸范围，更统一协调（110-140px）
            const opacity = 0.9 + Math.random() * 0.1; // 随机透明度（0.9-1.0），更柔和
            
            const element = document.createElement('div');
            element.className = 'card-gradient rounded-2xl p-4 md:p-6 shadow-lg opacity-0 pointer-events-none transition-all duration-500'; // 延长过渡时间
            element.style.width = `${size}px`;
            element.style.height = 'auto';
            element.style.left = `${x}px`;
            element.style.top = `${y}px`;
            element.style.position = 'absolute';
            element.style.zIndex = '20';
            element.style.opacity = `${opacity}`;
            
            // 随机旋转角度（-8到8度），旋转幅度更柔和
            const rotate = (Math.random() - 0.5) * 16;
            element.style.transform = `rotate(${rotate}deg)`;
            
            // 随机渐变颜色
            const gradientType = Math.floor(Math.random() * 3);
            let gradientClass = 'from-primary/80 to-accent/80'; // 降低透明度，更柔和
            if (gradientType === 1) gradientClass = 'from-secondary/80 to-primary/80';
            if (gradientType === 2) gradientClass = 'from-accent/80 to-secondary/80';
            
            element.innerHTML = `
                <p class="text-center font-medium text-dark/70 text-[clamp(0.9rem,2vw,1.1rem)] leading-relaxed bg-gradient-to-r ${gradientClass} text-gradient">
                    ${blessing}
                </p>
            `;
            
            // 存储元素信息
            blessingElements.push({
                element,
                x,
                y,
                size,
                rotate
            });
            
            return element;
        }

        // 创建颗粒
        function createParticles(x, y, count, color) {
            for (let i = 0; i < count; i++) {
                const particle = document.createElement('div');
                particle.className = 'particle animate-particle-fall';
                
                // 随机大小（2-6px）
                const size = Math.random() * 4 + 2;
                particle.style.width = `${size}px`;
                particle.style.height = `${size}px`;
                
                // 随机位置（围绕弹窗中心）
                const angle = Math.random() * Math.PI * 2;
                const distance = Math.random() * 30;
                particle.style.left = `${x + distance * Math.cos(angle)}px`;
                particle.style.top = `${y + distance * Math.sin(angle)}px`;
                
                // 随机颜色（基于弹窗颜色）
                const hue = color === 'primary' ? 350 : color === 'secondary' ? 271 : 345;
                const saturation = Math.floor(Math.random() * 30) + 70;
                const lightness = Math.floor(Math.random() * 20) + 60;
                particle.style.backgroundColor = `hsl(${hue}, ${saturation}%, ${lightness}%)`;
                
                // 随机透明度
                particle.style.opacity = Math.random() * 0.5 + 0.5;
                
                // 随机动画延迟
                particle.style.animationDelay = `${Math.random() * 0.5}s`;
                
                particlesContainer.appendChild(particle);
                
                // 动画结束后移除颗粒
                setTimeout(() => {
                    particle.remove();
                }, 2000);
            }
        }

        // 创建爱心形状的粒子
        function createHeartParticles() {
            const centerX = window.innerWidth / 2;
            const centerY = window.innerHeight / 2;
            const particleCount = 300;
            
            for (let i = 0; i < particleCount; i++) {
                const particle = document.createElement('div');
                particle.className = 'heart-particle';
                
                // 随机大小（2-8px）
                const size = Math.random() * 6 + 2;
                particle.style.width = `${size}px`;
                particle.style.height = `${size}px`;
                
                // 随机颜色（粉紫色系）
                const colors = ['#E94057', '#8A2BE2', '#FF6B8B', '#F8F0FF', '#FF85A2'];
                const color = colors[Math.floor(Math.random() * colors.length)];
                particle.style.backgroundColor = color;
                
                // 随机透明度
                particle.style.opacity = Math.random() * 0.8 + 0.2;
                
                // 设置初始位置（在屏幕中心附近）
                particle.style.left = `${centerX}px`;
                particle.style.top = `${centerY}px`;
                
                particlesContainer.appendChild(particle);
                
                // 计算粒子最终位置（形成爱心形状）
                const t = Math.random() * Math.PI * 2;
                const scale = 100 + Math.random() * 50;
                const x = 16 * Math.pow(Math.sin(t), 3);
                const y = -(13 * Math.cos(t) - 5 * Math.cos(2*t) - 2 * Math.cos(3*t) - Math.cos(4*t));
                
                const finalX = centerX + x * scale / 16;
                const finalY = centerY + y * scale / 16;
                
                // 添加动画效果
                particle.animate([
                    { transform: 'translate(0, 0)', opacity: 0 },
                    { opacity: 1, offset: 0.1 },
                    { transform: `translate(${finalX - centerX}px, ${finalY - centerY}px)`, opacity: 1 }
                ], {
                    duration: 2000 + Math.random() * 1000,
                    easing: 'ease-out',
                    fill: 'forwards'
                });
                
                // 添加悬浮动画
                setTimeout(() => {
                    particle.style.animation = 'particle-move 15s infinite linear';
                }, 2000);
            }
        }

        // 初始化动画 - 按顺序弹出祝福
        function initAnimation() {
            // 隐藏开始按钮
            startContainer.classList.add('opacity-0');
            setTimeout(() => {
                startContainer.style.display = 'none';
            }, 500);
            
            // 按顺序创建并显示祝福弹窗
            blessings.forEach((blessing, index) => {
                setTimeout(() => {
                    const element = createBlessingElement(blessing, index);
                    blessingsContainer.appendChild(element);
                    element.classList.add('animate-pop-in');
                }, index * 100); // 每100ms弹出一个
            });
            
            // 所有弹窗显示完成后，显示大弹窗
            setTimeout(() => {
                mainPopup.classList.remove('opacity-0', 'pointer-events-none');
                mainPopup.querySelector('div').classList.remove('scale-90');
                mainPopup.querySelector('div').classList.add('scale-100');
                
                // 5秒后开始消失动画
                setTimeout(() => {
                    // 所有祝福弹窗开始消失 - 按顺序消失
                    blessingElements.forEach(({ element, x, y }, index) => {
                        setTimeout(() => {
                            element.classList.remove('animate-pop-in');
                            element.classList.add('animate-fade-out');
                            
                            // 创建颗粒效果
                            const centerX = x + element.offsetWidth / 2;
                            const centerY = y + element.offsetHeight / 2;
                            createParticles(centerX, centerY, 15, 'primary');
                            
                            // 弹窗消失后移除
                            setTimeout(() => {
                                element.remove();
                            }, 800);
                        }, index * 50); // 每50ms消失一个
                    });
                    
                    // 大弹窗也消失
                    setTimeout(() => {
                        mainPopup.classList.add('opacity-0');
                        setTimeout(() => {
                            mainPopup.style.display = 'none';
                            
                            // 显示爱心粒子动画
                            setTimeout(() => {
                                heartContainer.classList.remove('opacity-0', 'pointer-events-none');
                                createHeartParticles();
                            }, 500);
                        }, 1000);
                    }, 800 + blessingElements.length * 50);
                }, 5000);
            }, blessings.length * 100 + 1000);
        }

        // 开始按钮点击事件
        startBtn.addEventListener('click', initAnimation);

        // 窗口大小改变时重新计算位置
        window.addEventListener('resize', () => {
            if (blessingElements.length > 0 && !heartContainer.classList.contains('opacity-100')) {
                usedPositions.clear();
                blessingElements.forEach(({ element, index }) => {
                    const { x, y } = getRandomPosition();
                    element.style.left = `${x}px`;
                    element.style.top = `${y}px`;
                });
            }
        });
    </script>
</body>
</html>